import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import dayjs from 'dayjs';
import { left, right } from '../Icons';
import styles from './index.module.less';

const SwitchBar = (props) => {
  const { className, date, range, onClick } = props;
  return (
    <div className={classnames(styles.root, className)}>
      <div
        className={styles.switch}
        style={range && dayjs(date).isSame(dayjs(range[0]), 'month') ? { opacity: 0.2 } : null}
        onClick={() => {
          if (!(range && dayjs(date).isSame(dayjs(range[0]), 'month'))) {
            onClick('prev');
          }
        }}
      >
        {left()}
      </div>
      <div style={{ color: '#3CE5D3' }}>{date?.format('YYYY-MM') || ''}</div>
      <div
        className={styles.switch}
        style={range && dayjs(date).isSame(dayjs(range[1]), 'month') ? { opacity: 0.2 } : null}
        onClick={() => {
          if (!(range && dayjs(date).isSame(dayjs(range[1]), 'month'))) {
            onClick('next');
          }
        }}
      >
        {right()}
      </div>
    </div>
  );
};

SwitchBar.defaultProps = {
  className: null,
  date: null,
  range: null,
  onClick: () => {},
};

SwitchBar.propTypes = {
  className: PropTypes.any,
  date: PropTypes.any,
  range: PropTypes.any,
  onClick: PropTypes.func,
};

export default SwitchBar;
